<template>
  <div class="main">
    <page-header></page-header>
    <back></back>
    <div class="content px-2">
      <div class="flex">
        <div class="top-tip flex align-center justify-start">
          <div class="colorfff font24">规上企业</div>
           <search-company></search-company>
          <!-- <div class="flex align-center topselect">
            <el-select
              v-model="seachParams.qytype"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in qyTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <div
              @click="search"
              class="btnbg flex align-center justify-center colorfff toptip font20 font-weight-500"
            >
              查看
            </div>
          </div> -->
          <!--<div class="flex align-center ml-4">
            <el-select
              v-model="seachParams.cptype"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in cpTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <div
              @click="search"
              class="btnbg flex align-center justify-center colorfff toptip font20 font-weight-500"
            >
              查看
            </div>
          </div>-->
        </div> 
      </div>
      <div class="bottom-tip mt-1 p-2 flex flex-column">
        <div class="mt-1 p-2 flex">
          <el-table
            :data="tableData"
            class="customer-table"
            size="small"
            @cell-click="clickItem"
            style="width: 100%; background: transparent; text-align: center"
            :header-cell-style="{
              background: 'rgba(0, 86, 251, .2)',
              fontSize: getRealPX(12) + 'px',
            }"
            :max-height="getRealPX(730)"
          >
            <el-table-column
              label="排名"
              align="center"
              type="index"
              width="50"
            >
            <template slot-scope="scope">
                  <div style="color: #fedf7a">
                    {{ scope.$index +((pageIndex-1) * pageSize)  + 1 }}
                  </div>
                </template>
            </el-table-column>
            <el-table-column
              prop="vcCompanyName"
              label="企业名称"
              align="center"
              width="180"
            >
            </el-table-column>
            <el-table-column label="销量(吨)" align="center">
               <el-table-column prop="tljz" label="铁路运输" align="center">
                 <template slot-scope="scope">
                  <div style="color: #fedf7a">
                    0
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="gjHwYsl" label="公路运输" align="center">
              </el-table-column>
              <el-table-column label="合计" align="center">
                <template slot-scope="scope">
                  <div style="color: #fedf7a">
                    {{ scope.row.gjHwYsl }}
                  </div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column prop="ydl"
                             label="用电量"
                             align="center"
                             width="80">
                             <template slot-scope="scope">
                                {{ scope.row.ydl || 0 }} 
                             </template>
            </el-table-column>
             
             <el-table-column label="纳税(元)" align="center">
              <el-table-column prop="vcZzs" label="增值税" align="center">
                <template slot-scope="{ row }">
                  {{ parseFloat(row.vcZzs||0).toFixed(2) }}
                </template>
              </el-table-column>
              <el-table-column prop="vcZys" label="资源税" align="center">
                <template slot-scope="{ row }">
                  {{ parseFloat( row.vcZys||0).toFixed(2) }}
                   
                </template>
              </el-table-column>
              <el-table-column prop="vc1ysds" label="企业所得税" align="center">
                <template slot-scope="{ row }">
                  {{ parseFloat(row.vc1ysds || 0).toFixed(2) }}
                </template>
              </el-table-column>
              <el-table-column prop="vcHbs"
                               label="环保税"
                               align="center">
                <template slot-scope="{row}">
                  {{parseFloat(row.vcHbs||0).toFixed(2)}}
                </template>
              </el-table-column>
              <el-table-column prop="vcSzys"
                               label="水资源税"
                               align="center">
                <template slot-scope="{row}">
                  {{parseFloat(row.vcSzys||0).toFixed(2)}}
                </template>
              </el-table-column>
              <!-- <el-table-column prop="vcGs"
                               label="国税"
                               align="center">
                <template slot-scope="{row}">
                  {{ parseFloat(row.vcGs||0).toFixed(2) }}
                </template>
              </el-table-column>
              <el-table-column prop="vcDs"
                               label="地税"
                               align="center">
                <template slot-scope="{row}">
                  {{ parseFloat(row.vcDs||0).toFixed(2) }}
                </template>
              </el-table-column> -->
              <el-table-column prop="vcPwf"
                               label="排污费"
                               align="center">
                <template slot-scope="{row}">
                  {{ parseFloat(row.vcPwf||0).toFixed(2) }}
                </template>
              </el-table-column>

               <el-table-column prop="vcDkqk"
                               label="抵扣情况"
                               align="center">
                <template slot-scope="{row}">
                  {{ parseFloat(row.vcDkqk||0).toFixed(2) }}
                </template>
              </el-table-column>

               
            </el-table-column>
          </el-table>
 
        </div>
        <div class="pagination">
          <el-pagination
            :current-page="pageIndex"
            :page-size="pageSize"
            prev-text="上一页"
            next-text="下一页"
            layout="total, prev, pager, next, jumper"
            style="display: inline-block"
            background
            @current-change="handlePageChange"
            :total="total"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import pageHeader from "@/components/header.vue";
import back from "@/components/back.vue";
import ElTab from "@/components/el_table";

import companyApi from "@/api/company/index";
import SearchCompany from '@/components/searchCompany.vue';
export default {
  name: "pageBiling",
  components: { pageHeader, back, SearchCompany },
  data() {
    return {
      qyTypeList: [],
      cpTypeList: [],
      tableData: [],
      tableData2: [],
      pageIndex: 1,
      // 总条数
      total: 0,
      // 每页条数
      pageSize: 15,
      seachParams: {},
    };
  },
  methods: {
    search() {
      this.pageIndex = 1;
      this.initCompanyList();
    },
    handlePageChange(val) {
      this.pageIndex = val;
      this.initCompanyList();
    },
    initQyTypeList() {
      let that = this;
      companyApi
        .getQyList({})
        .then(function (res) {
          if (res.code == 200) {
            res = res.data;
            that.qyTypeList = res;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    initCpTypeList() {
      let that = this;
      companyApi
        .getCpType({})
        .then(function (res) {
          if (res.code == 200) {
            res = res.data;
            that.cpTypeList = res;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    initCompanyList() {
      let that = this;
      this.seachParams.pageIndex = this.pageIndex;
      this.seachParams.pageSize = this.pageSize;
      companyApi
        .getCompanyListGuiShang(this.seachParams)
        .then(function (res) {
          if (res.code == 200) { 
            res = res.data
            that.tableData = res.records
            // that.cpTypeList = res;
            // if (res.length > 20) {
            //   that.tableData = res.slice(0, 20);
            //   that.tableData2 = res.slice(20, res.length);
            // } else {
            //   that.tableData = res;
            // }
            that.total = res.total;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    clickItem(row) {
      this.$router.push({ path: "/company", query: { longCompanyId: row.vcCompanyName } });
    },
  },
  mounted() {
    this.initQyTypeList();
    this.initCpTypeList();
    this.initCompanyList();
  },
};
</script>
<style lang="stylus" scoped>
.btnbg {
  width: 82px;
  height: 60px;
  background: url('../../assets/img/search/bg.png') no-repeat;
  background-size: 82px 60px;
  margin-left: -5px;
}

/deep/.el-select {
  height: 60px;
  width: 300px;
  border-radius: 0;
  background-color: #0E215B;
}

/deep/.el-input .el-input--suffix {
  height: 60px;
  width: 300px;
  border-radius: 0;
  background-color: #0E215B;
}

/deep/.el-input__inner {
  height: 60px;
  width: 300px;
  border-radius: 0;
  background-color: #0E215B;
}

/deep/.el-table th {
  color: #ffffff; /* 字体颜色 */
  font-size: 16px;
  background-color: transparent; /* 背景透明 */
  // border: 0;
  // height: 30px;
  // line-height: 30px;
}

/deep/.el-table tr, .el-table td {
  color: #e5dada;
  font-size: 12px;
  background-color: transparent; /* 背景透明 */
  // border: 0;
  // height: 30px;
  // line-height: 30px;
}

/, /deep/.el-table tr.data-row {
  background: rgba(0, 204, 255, 0.2);
}

/deep/.el-table tr.dataone-row {
  // background: block;
}

/deep/.el-table td, .el-table th.is-leaf, .el-table--border, .el-table--group {
  color: rgba(0, 204, 255, 1);
  font-size: 12px;
  font-weight: 400;
}

// 去掉表格单元格边框
/deep/.customer-table th {
  border: 1px solid rgba(0, 86, 251, 0.2);
}

/deep/.customer-table td, .customer-table th.is-leaf {
  border: 1px solid rgba(0, 86, 251, 0.2);
  border-top: 0;
}

// 表格最外边框
/deep/.el-table--border, .el-table--group {
  border: 1px solid rgba(0, 86, 251, 0.2);
}

// 头部边框
/deep/.customer-table thead tr th.is-leaf {
  border: 1px solid rgba(0, 86, 251, 0.2);
  border-right: none;
}

/deep/.customer-table thead tr th:nth-last-of-type(2) {
  border-right: 1px solid rgba(0, 86, 251, 0.2);
}

// 表格最外层边框-底部边框
/deep/.el-table--border::after, .el-table--group::after {
  width: 0;
}

/deep/.customer-table::before {
  width: 0;
}

/deep/.customer-table .el-table__fixed-right::before, .el-table__fixed::before {
  width: 0;
}

// 表格有滚动时表格头边框
/deep/.el-table--border th.gutter:last-of-type {
  border: 1px solid rgba(0, 86, 251, 0.2);
  border-left: none;
}

.top-tip {
  width: 100%;
  height: 74px;
  background: url('../../assets/img/billing/top.png') no-repeat;
  background-size: 100% 74px;
  overflow: hidden;

  .font24 {
    margin-left: 116px;
    margin-right: 130px;
  }
}

.bottom-tip {
  width: 100%;
  height: 870px;
  background: url('../../assets/img/billing/bottom.png') no-repeat;
  background-size: 100% 870px;
}

.toptip {
  margin-left: 0px !important;
}

.topselect {
  margin-left: 150px;
}

.btnbg {
  width: 76px;
  height: 54px;
  background: url('../../assets/img/company/Bg.png') no-repeat;
  background-size: 76px 54px;
  cursor: pointer;
}

/deep/.el-select {
  height: auto;
}
</style>
